<template>
  <div class="index">
    <div class="slogin">
      <div class="imgs"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {}
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.index {
  width: 100%;
  height: 100%;
  background-image: url(../assets/Banner.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  /* background: url(../assets/Banner.jpg) no-repeat center center; */
  background-size: cover;
}
.index .slogin {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
}
.index .slogin .imgs {
  width: 1009px;
  height: 100%;
  background-image: url(../assets/Index_6.png);
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: 100%;
  margin: 0 auto;
}
@media (max-width: 1009px) {
  .index .slogin .imgs {
    width: 96%;
  }
}
@media (max-width: 767px) {
  .index .slogin .imgs {
    background-position: center 50%;
  }
}
</style>

